<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<u-navbar bgColor="#F5F9FC" :placeholder="true" :autoBack="true">
			<view slot="left" class="navbar-left">
				<navigator open-type="navigateBack" :delta="1" class="back-navigator">
					<view class="back-content">
						<u-icon color="#1e88e5" name="arrow-left"></u-icon>
						<text class="navbar-title">设置</text>
					</view>
				</navigator>
			</view>
		</u-navbar>

		<!-- 主内容区 - 完全保留你原有布局，仅加分割线样式 -->
		<view class="more-box">
			<view class="more-item" @click="toPersonalInfo()">
				<view style="display: flex;align-items: center;">
					<image src="../../static/images/user.png" style="width: 60rpx;height: 60rpx;"></image>
					<view>个人资料</view>
				</view>
				<u-icon name="arrow-right" color="#cccccc" size="16"></u-icon>
			</view>
			<view class="more-item" @click="toAccountPassword()">
				<view style="display: flex;align-items: center;">
					<view
						style="width: 60rpx;height: 60rpx; margin-right: 30rpx; display: flex; align-items: center; justify-content: center;">
						<u-icon color="#1e88e5" name="lock-fill" size="60rpx"></u-icon>
					</view>
					<view>账号密码设置</view>
				</view>
				<u-icon name="arrow-right" color="#cccccc" size="16"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		methods: {
			// 跳转到个人资料页面
			toPersonalInfo() {
				uni.navigateTo({
					url: '/pageNew/setup/personal-info'
				});
			},
			// 跳转到账号密码设置页面
			toAccountPassword() {
				uni.navigateTo({
					url: '/pageNew/setup/account-password'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page-container {
		min-height: 100vh;
		background-color: #f9fafb;
	}

	.navbar-left {
		display: flex;
		align-items: center;
	}

	.back-navigator {
		display: flex;
		align-items: center;
	}

	.back-content {
		display: flex;
		align-items: center;
	}

	.navbar-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #1e88e5;
		margin-left: 16rpx;
	}

	// 核心修复：保留原有样式，仅添加分割线+修复图标对齐
	.more-box {
		height: auto;
		border-radius: 16rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
		margin: 20rpx;
		padding: 20rpx;

		.more-item {
			width: 100%;
			height: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			// 仅添加这两行：分割线 + 统一间距（去掉原有margin-top）
			border-bottom: 1px solid #f0f0f0;
			padding: 15rpx 0;

			// 最后一个item去掉分割线
			&:last-child {
				border-bottom: none;
			}

			// 修复image和u-icon的默认间距不一致问题
			image {
				margin-right: 30rpx !important; // 和u-icon的margin-right保持一致
			}
		}
	}
</style>